<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="UTF-8" />
    <meta http-equiv="X-UA-Compatible" content="IE=edge" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <title>拖动简单示例</title>
    <style>
      body {
        /* 禁止文字可以被选择 */
        user-select: none;
      }
      #draggable {
        text-align: center;
        background: white;
      }
      .dropzone {
        width: 200px;
        height: 80px;
        background-color: blueviolet;
        margin: 10px;
        padding: 10px;
      }
      /* .dropzone {
        width: 200px;
        height: 50px;
        background-color: blueviolet;
        margin: 10px;
        padding: 5px;
      } */
      .dropzone.dragover {
        background-color: yellow;
      }
      .dragging {
        /* opacity: 0.25;
        background: red !important;; */
        background-color: rgba(225, 0, 0, 0.2) !important;
      }
    </style>
  </head>
  <body>
    <div class="dropzone">
      <div draggable="true" id="draggable">DIV可以被拖动</div>
    </div>
    <div class="dropzone" id="droptarget"></div>
  </body>
  <script>
    //20.6 原生拖放
    // HTML5 在 IE 的拖放实现基础上标准化了拖放功能。所有主流浏览器都根据 HTML5 规范实现了原生的拖放。
    // 1.某个元素被拖动时，会（按顺序）触发以下事件：
    // (1) dragstart: 在按住鼠标键不放并开始移动鼠标的那一刻，被拖动元素上会触发 dragstart 事件。此时光标会变成非放置符号（圆环中间一条斜杠），表示元素不能放到自身上。拖
    // (2) drag: dragstart 事件触发后，只要目标还被拖动就会持续触发 drag 事件。这个事件类似于 mousemove，即随着鼠标移动而不断触发。
    // (3) dragend: 当拖动停止时（把元素放到有效或无效的放置目标上），会触发 dragend事件。
    // 所有这 3 个事件的目标都是被拖动的元素。
    // 在把元素拖动到一个有效的放置目标上时，会依次触发以下事件：
    // (1) dragenter: 只要一把元素拖动到放置目标上，dragenter 事件（类似于 mouseover 事件）就会触发。
    // (2) dragover: dragenter事件触发之后，会立即触发 dragover 事件，并且元素在放置目标范围内被拖动期间此事件会持续触发。
    // (3) dragleave 或 drop: 当元素被拖动到放置目标之外，dragover 事件停止触发，dragleave 事件触发（类似于 mouseout事件）。如果被拖动元素被放到了目标上，则会触发 drop 事件而不是 dragleave 事件。
    // 这些事件的目标是放置目标元素
    // draggable 属性规定元素是否可拖动。提示： 链接和图像默认是可拖动的。
    // 在html中，可以利用user-select属性来禁止文字选择，只需要给文本元素添加“user-select:none;”样式即可；user-select属性用于设置用户是否能够选中文本，当值为“none”可让文本不能被选择。

    const sourceEle = document.getElementById('draggable'); //被拖动元素
    sourceEle.addEventListener('dragstart', (event) => {
      console.log('dragstart--元素开始被拖动');
      event.target.classList.add('dragging');
    });
    sourceEle.addEventListener('drag', (event) => {
      console.log('drag--元素被拖动');
    });
    sourceEle.addEventListener('dragend', (event) => {
      console.log('dragend--拖动停止了');
      event.target.classList.remove('dragging');
    });
    const targetEle = document.getElementById('droptarget'); //目标元素
    targetEle.addEventListener('dragenter', (event) => {
      console.log('dragenter--被拖动元素开始进入目标元素');
      if (event.target.classList.contains('dropzone')) {
        event.target.classList.add('dragover');
      }
    });
    targetEle.addEventListener('dragover', (event) => {
      event.preventDefault();
      console.log('dragover--被拖动元素在目标元素范围内移动');
    });
    targetEle.addEventListener('dragleave', (event) => {
      console.log('dragleave--被拖动元素脱离目标元素范围外移动');
      if (event.target.classList.contains('dropzone')) {
        event.target.classList.remove('dragover');
      }
    });
    targetEle.addEventListener('drop', (event) => {
      console.log('drop--被拖动元素被放到了目标元素上');
      event.preventDefault(); //禁止默认行为
      if (event.target.classList.contains('dropzone')) {
        event.target.classList.remove("dragover");
        //删除子节点
        // sourceEle.parentNode.removeChild(sourceEle);
        //删除自身
        sourceEle.remove();
        event.target.appendChild(sourceEle);
      }
    });
  </script>
</html>
